<template>
  <div class="root">
    <div class="content">
      <view class="top-item" @click="onItemClick('1')">拍照</view>
      <u-line></u-line>
      <view class="norm-item" @click="onItemClick('2')">从相册中选择</view>
      <u-gap height="10"></u-gap>
      <view class="norm-item" @click="onItemClick('3')">取消</view>
    </div>
  </div>
</template>

<script>
import { pathToBase64 } from "image-tools";
import ajaxApi from "@/api/ajax";
import moment from "moment";
import passData from "@/api/requstUtil";
export default {
  data() {
    return {};
  },
  props: {
    imgBsnNo: {
      type: String,
      default: "",
    },
  },
  methods: {
    onItemClick(flag) {
      let that = this;
      let sourceType = {
        1: ["camera"],
        2: ["album"],
      };
      if (flag == "3") {
        this.$emit("close");
      } else {
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: sourceType[flag], //从相册选择
          success: function (res) {
            console.log(222, JSON.stringify(res.tempFilePaths));
            that.getImageInfo(res.tempFilePaths[0]);
          },
        });
      }
    },
    getImageInfo(src) {
      let that = this;
      uni.getImageInfo({
        src,
        success(res) {
          let canvasWidth = res.width; //图片原始长宽(size <= 1048576) ? 4 : (size <= 5242880) ? 6 : 8
          let canvasHeight = res.height;
          let img = new Image();
          img.src = res.path;
          let canvas = document.createElement("canvas");
          let ctx = canvas.getContext("2d");
          let mul = 5;
          canvas.width = canvasWidth / mul;
          canvas.height = canvasHeight / mul;
          ctx.drawImage(img, 0, 0, canvasWidth / mul, canvasHeight / mul);
          canvas.toBlob(function (fileSrc) {
            let imgSrc = window.URL.createObjectURL(fileSrc);
            console.log("压缩后", imgSrc);
            pathToBase64(imgSrc).then((base64) => {
              that.postUpdateData(base64);
              console.log(that.imgBsnNo);
              console.log(base64);
            });
          });
        },
      });
    },
    async postUpdateData(url) {
      let ajxa = "postUploadImageData",
          fileName = '上次头像'
      if (this.imgBsnNo) {
        ajxa = "postUpdateImageData";
        fileName = '修改头像'
      }
      let param = {
        image: url,
        imageSubType: "PROFILE_PHOTO",
        imageType: 'AVATAR',
        imgBsnNo: this.imgBsnNo,
        originalFilename: `${fileName}-${moment().format("YYYYMMDDHHmmss")}.png`,
      };
      try {
        let res = await ajaxApi[ajxa](param);
        let data = passData(res)
        console.log(data)
        if(data) {
         this.$emit('changeImage', data)
        }

      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.root {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    width: 100%;

    .top-item {
      display: flex;
      justify-content: center;
      align-items: center;
      background: white;
      height: 48px;
      border-radius: 10px 10px 0px 0px;
      width: 100% !important;
    }

    .norm-item {
      display: flex;
      justify-content: center;
      align-items: center;
      background: white;
      height: 48px;
      width: 100% !important;
    }
  }
}
</style>